<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>{
            margin: 0 auto;
        }
        video  {
            position: absolute;
            z-index: 1;
        }

      .c1 {
          position: absolute;
          font-size: 25px;
          margin: -20px  0  0 230px;
          z-index:6;
      }
      .c1 p a{
          text-decoration: none;
          color: white;
          font-weight: 500;
      }
      ul li a{
          color:#e8e8e8;
          text-decoration: none;
          font-size: 20px;
      }
      ul{
          list-style-type: none;
          float: left;
          margin-left: 40px;

      }
       #i2{
          position: absolute;
          z-index: 3;
          margin: 10px 10px 0 15px ;
      }
       el-mian{
           padding-right:250px;
           z-index: 3;
           position: absolute;
           background-color: #e8e8e8;
           background-color: rgba(0,0,0,0);


       }
       .c_l_1{
           position: absolute;
           z-index: 3;
           overflow: hidden;

       }

      .c_l_1 a{
         background-color: red;
          display: block;
          width: 290px;
          height: 160px;
          font-size: 40px;
          text-align: center;
          text-decoration: none;
          color: white;
          margin: -40px 0 0 0;
          overflow: hidden;
     }
      .c_l_1 a p{

      }


    </style>
</head>
<body>
<div>
<img id="i2" src="https://webinput.nie.netease.com/img/xyq/logo.png/200" alt="">
<video src="https://xyq.v.netease.com/2022/0120/6405bb546eb4dcf18c7f34c6e7f98b32.mp4"
       autoplay="autoplay" loop="" autobuffer="" muted="" preload="auto"
       style="width:1920px ;">
</video>
<div class="c1">
    <ul>
        <p><a href="http://xyq.163.com/">首页</a></p>
        <li><a href="  "></a></li>
        <li><a href="  "></a></li>
        <li><a href="  "></a></li>
    </ul>
    <ul>
        <p><a href="">下载专区</a></p>
        <li><a href="">PC客户端</a></li>
        <li><a href="">手机互通版</a></li>
        <li><a href="">pc补丁</a></li>
        <li><a href="">藏宝阁APP</a></li>
        <li><a href="">将军令APP</a></li>
    </ul>
    <ul>
        <p><a href="">游戏资料</a></p>
        <li><a href="">玩法说明</a></li>
        <li><a href="">新手攻略</a></li>
        <li><a href="">官方攻略</a></li>
        <li><a href="">赛事中心</a></li>
        <li><a href="">游戏素材</a></li>
    </ul>
    <ul>

        <p><a href="">自助服务</a></p>
        <li><a href="">快速充值</a></li>
        <li><a href="">消费查询</a></li>
        <li><a href="">密码找回</a></li>
        <li><a href="">解除密保</a></li>
    </ul>
    <ul>
        <p><a href="">玩家互动</a></p>
        <li><a href="">论坛</a></li>
        <li><a href="">玩家天地</a></li>
        <li><a href="">网易大神</a></li>
        <li><a href="">微信</a></li>
    </ul>
    <ul>
        <p><a href="">客服中心</a></p>
        <li><a href="">在线客服</a></li>
        <li><a href="">客服专区</a></li>
        <li><a href="">意见反馈</a></li>
    </ul>
</div>
<!--中间区域 第一部分-->
<!--左边第1-->
<el-mian style="width: 1650px;height: 480px; margin:500px 0px 0 10px ;">
    <el-row :gutter="20">
        <el-col :span="2">
            <!--top 左边1开始-->
            <!--top 左边1结束-->
        </el-col>
        <el-col :span="4">
            <!--top 左边2开始 -->
            <!--top 左边2结束 -->
        </el-col>
        <el-col :span="4">
            <!--top 左边3开始 -->
            <!--top 左边3结束 -->
        </el-col>
        <el-col :span="2">
            <!--top 左边4开始-->
            <!--top 左边4结束-->
        </el-col>
    </el-row>

</el-mian>
</div>
</body>
</html>